<template>
   <div>
      <el-descriptions class="margin-top" style="padding:2%;" title="个人统计" :column="3" :size="size" border>
      <template slot="extra">
        <!-- <el-button type="primary" size="small">操作</el-button> -->
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-data"></i>
           图书总计
        </template>
        <el-tag size="small">{{book_number}} 本</el-tag> 
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-data"></i>
          出版社录入
        </template> 
        <el-tag size="small">{{press_number}} 家</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-data"></i>
          作家录入
        </template>
        <el-tag size="small">{{author_number}} 人</el-tag>
      </el-descriptions-item> 
    </el-descriptions>


    <el-row style="padding:2%;">
      <el-col :span="12">
        <div style="width:100%; height:1000px;" class="grid-content bg-purple" id="author_bar">
            
        </div>
      </el-col>
      <el-col :span="12">
        <div style="width:100%;height:1000px;" class="grid-content bg-purple-light" id="type_bar">
           
        </div>
      </el-col>
    </el-row>

   </div>
</template>

<script>
import * as echarts from 'echarts';

export default { 
  data() {
    return { 
      book_number:0,
      press_number:0,
      author_number:0,
      size:'medium '
    }
  },
  mounted (){
     this.get_total_data(); 
  },
  methods: {
     get_total_data(){
      this.$post(this.$api + '/home_show_data', {})
                        .then((res) => {
                          if(res.code == 0)
                          {
                            this.book_number = res.data.book_number;
                            this.press_number = res.data.press_number;
                            this.author_number = res.data.author_number;
                            this.start_author_bar(this.create_option("作者统计",res.data.author_bar_data));
                            this.start_type_bar(this.create_option("类型统计",res.data.type_bar_data));
                          }
                        }); 
 
     }, 
     start_author_bar(option){ 
        var myChart = echarts.init(document.getElementById('author_bar'));
        myChart.setOption(option);
     },
     create_option(name,data){
        return {
          title: {
              text: name, 
              left: 'center'
            },
            legend: {
              top: 'bottom'
            },
            tooltip: {
              trigger: 'item'
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
              }
            },
            series: [
              {
                name: name,
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 8
                },
                data: data
              }
            ]
          };
     },
     start_type_bar(option){
         var myChart = echarts.init(document.getElementById('type_bar'));
         myChart.setOption(option);
     },  
  }
}
</script> 
<style>
   .hello {
     text-align: center;
     font-size: 20px;
     line-height: 60px;
   }
   .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    text-align: center;
  }
</style>